@charset "utf-8";
@import url("../SOURCES/Glacial_Indifference_Bold/stylesheet.css");

body, html{
	height: auto;
	width: 100%;
	margin: 0;
}
    #navegador ul {
      list-style-type: none; 
      background-color: #FF6262; 
      display: flex; 
      align-items: center; 
      padding: 0; 
      margin: 0; 
	  width: 100%;
	  gap: 30px;
    }
    #navegador li {
      margin: 0 70px; 
    }
    #navegador li img {
      margin-right: 15px;
		margin-top: 2px;
    }
    #navegador li a {
      display: inline-block;
      padding: 10px 20px; 
      color: #FFFFFF; 
      background-color: #FF6262; 
      text-decoration: none; 
      border-radius: 50px; 
      font-family: 'Glacial-Indifference-Bold'; 
      font-size: 18px; 
      font-weight: bold;
      transition: background-color 0.3s ease; 
    }
 
    #navegador li a:hover {
      background-color: #202284; 
      color: #FFFFFF; 
    }
.main, h1{
	font-family: 'Glacial-Indifference-Bold';
	color: #202284;
	font-size: 56px;
	text-align: center;
}

.main, h2{
	font-family: 'Glacial-Indifference-Bold';
	color: #202284;
	font-size: 39px;
	text-align: center;
}

.main, h3{
	font-family: 'Glacial-Indifference-Bold';
	color: #202284;
	font-size: 21px;
	text-align: center;
}

.main, p{
	font-family: 'Glacial-Indifference-Bold';
	color: black;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
}

.main, .img1, .img2{
	height: 300px;
	width: auto;
	border-radius: 50%;
}

.main, video{
	height: 150px;
	width: auto;
	border-radius: 15px;
}

.footer-bar {
    width: auto;
    margin-top: auto; 
    background-color: #202284;
    display: flex;
    align-items: center;
    justify-content: space-around; 
    padding: 5px;
}

.footer-bar ul{
	list-style-type: none; 
      background-color: #202284; 
      display: flex; 
      align-items: center; 
      padding: 0; 
      margin: 0; 
	  width: 100%;
	  gap: 20px;
}

    .footer-bar li {
      margin: 0 auto;
    }

    .footer-bar li img {
      margin-right: 10px; 
    }

.footer-bar h1{
	color: white;
	font-family: 'Glacial-Indifference-Bold';
	font-size: 17.4px;
	
}

    .footer-bar li p {
      display: inline-block;
      padding: auto 10px; 
      color: white; 
      text-decoration: none; 
      font-family: 'Glacial-Indifference-Bold'; 
      font-size: 15.7px; 
      font-weight: bold; 
    }
#main {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: flex-start; 
	margin-left: 50px;
	margin-right: 50px;
	align-content: center;
	margin-bottom: 20px;
	gap: 0px;
}

#welcome {
    font-size: 2.5rem;
    text-align: center; 
    margin: 0; 
}
#container1{
	    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
    align-items: center;
    height: 100vh; 
    background-color: #f4f4f4;
}

#block1 {
	width: 250px;
    height: 40px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
	margin-left: 100px;
	
}
#block2 {
	width: 270px;
    height: 100px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
	margin-left: 90px;
	margin-top: 10px;
}

#block3 {
    background-color: #FF0086;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 10px;
}
#container2{
	    display: flex; 
    flex-direction: column;
    justify-content: space-around; 
    align-items: center; 
    height: 100vh; 
    background-color: #f4f4f4;
}

.container2 img2{
	 display: block; 
    margin: 0 auto;
    max-width: 100%; 
    height: auto; 
}

#container3{
	    display: flex; 
    flex-direction: column; 
    justify-content: space-around;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}


.container1, .container3 {
    flex: 1; 
    width: 100%; 
    max-width: 300px; 
    text-align: center;
}

.container2{
	flex: 2;
	max-width: 500px;
}
.container2 img {
    display: block; 
    margin: 0 auto; 
    max-width: 100%; 
    height: auto; 
}
